<template>
    <div class="iframe">
        <div class="i-title">
            <h3>获取全局变量</h3>
        </div>
        <div class="i-tip">
            {{ data.tip }}{{counter}}
        </div>
        <div class="i-tip">
            {{ name }}{{isAdmin}}
        </div>
        <div class="i-tip">
            {{counterPar}}
        </div>
        <div class="i-tip">
            <el-button @click="update">批量更新</el-button>
            <el-button @click="add">加10</el-button>
        </div>
    </div>
</template>

<script>
    import {
        storeToRefs
    } from 'pinia'
    import {
        reactive,
        onMounted
    } from "vue"
    import {
        useStore
    } from '../../store'
    export default {
        setup() {
            const store = useStore();
            let data = reactive({
                tip: "loading",
                counter: store.counter
            })
            let {
                name,
                isAdmin,
                counter,
                counterPar
            } = storeToRefs(store);
            function changeV() {
                window.setInterval(() => {
                    counter.value++
                }, 1000)
            }
            onMounted(() => {
                changeV();
            })
            function update() {
                store.$patch(state => {
                    state.counter = 3;
                    state.name = "陶国荣";
                    state.isAdmin = false;
                })
            }
            const add = () => {
                store.changeCounter(10)
            }
            return {
                data,
                name,
                isAdmin,
                counter,
                update,
                add,
                counterPar
            }
        }
    }
</script>
